// 老师介绍
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    ScrollView,
    TouchableOpacity,
    Image,
} from 'react-native'
import RecommendTea from './RecommendTea'
import Lessons from './Lessons'
import TeacherInfo from './TeacherInfo'
import { getTeacherByUserId } from '../api/my';
import Loading from '../common/Loading'
import NavigatorBar from '../common/NavigationBar';
import { getTeacherCourse } from '../api/my';
import {setSpText,setHW} from './ScreenUtil'

import BackPressComponent from '../common/BackPressComponent';

var cacheData = {
    items: [],
    total: 0,
    nextPage: 1
}
export default class TeaIntroduction extends Component {
    constructor(props) {
        super(props);
        this.params = props.navigation.state.params;
        this.backPress = new BackPressComponent({ backPress: (e) => this.onBackPress(e) });
        this.state = {
            loading:true,
            dataList: [],
            LessonsList: [],
            subject: '',
            grade: '',
            teacherId: '',
            LessonsMore: false,
            noData: false
        };
    }
    onBackPress() {
        this.params && this.params.refreshPage && this.params.refreshPage();//返回上一个页面的refreshPage()
    }
    //获取教师信息
    componentDidMount() {//加载完 获取传过来的字段 用这个字段调老师介绍的接口
        this.backPress.componentDidMount();
        let teacherId = '';//教师id
        if (this.params && this.params.teacherId) {//这种情况是从教师列表点击进入教室介绍详情页面
            teacherId = this.params.teacherId
        } else {//这是通过点击课程 进入课程目录 教师介绍的tab页面 传入
            if (this.props && this.props.headerInfor && this.props.headerInfor.CREATOR) {
                teacherId = this.props.headerInfor.CREATOR
            }
        }
        this.setState({
            teacherId
        })
        let json = {
            "ID": global.ECourseConstant.userInfo.uuid,//app给的 登陆的人的id
            "USERID": teacherId,//教师id
            "SORTBYTIME": "1",
            "LISTCOURSE": [{ "ID": this.props.courseId }]//当前课程id
        }
        global.log(json, '老师介绍接口的参数---------------------');
        this._getTeacherByUserId(json);
        this._getTeacherCourse(teacherId)
    }
    // 获取老师介绍的信息
    _getTeacherByUserId(json) {
        
        getTeacherByUserId(json).then(res => {
            this.setState({
                loading:false,
                dataList: [res],
                subject: res.TEACHSUBJECT,
                grade: res.TEACHGRADE
            });
        })
        
    }
    // 获取老师介绍里面的课程
    _getTeacherCourse(teacherId) {
        var ToucherCourseData = {
            sendData: {
                "USERID": teacherId, 
                "LISTCOURSE": [{ "ID": this.props.courseId }] 
            },
            page: cacheData.nextPage,
            rows: 10
        }
        this.setState({
            isLoading: true
        });
        
        getTeacherCourse(ToucherCourseData).then(res => {
            cacheData.items = this.state.LessonsList.concat(res.LIST);
            cacheData.total = res.PAGINATION.TOTAL;
            var data = [...cacheData.items];
            this.setState({
                LessonsList: data,
                isLoading: false,
                noData: data.length == 0
            })
            this.hasMoreLessons();
        })
    }
    getMoreLessons() {
        if (!this.state.isLoading) {
            cacheData.nextPage = cacheData.nextPage + 1;
            this._getTeacherCourse(this.state.teacherId);
        }
    }
    hasMoreLessons() {
        if (this.state.LessonsList.length >= cacheData.total && cacheData.total > 0) {
            this.setState({
                LessonsMore: false,
                noData: true
            })
            return false
        }
        return true
        // 
    }
    componentWillUnmount() {
        cacheData = {
            items:[],
            nextPage: 1,
            total: 0
        }
        this.backPress.componentWillUnmount();
    }

    // 渲染按钮 返回按钮
    renderLeftButton(image) {
        return <TouchableOpacity
        style={[global.CommonStyleSheet.NavLeftButton]}
        onPress={()=>{
                this.params&&this.params.refreshPage&&this.params.refreshPage();//返回上一个页面的refreshPage()
                this.props.navigation.goBack();//pop就会返回上一个页面
            }}>
            <Image style={{width: 34, height: 34}} source={image}/>
        </TouchableOpacity>
    }
    render() {
        return (
            // {/* 课程目录和课时目录是其他在授  其他老师详情是所有在授 */}
            // this.params.teacherId 代表是点击老师 查看详情 详情页面
            <View style={{flex: 1}}>
                    {this.params&&this.params.teacherId?<NavigatorBar 
                        style={styles.navigatorBar} 
                        title={'老师介绍'}
                        leftButton={this.renderLeftButton(require('../assets/imgs/back.png'))}/>:null}
                    <ScrollView style={[styles.introBox]}
                        showsVerticalScrollIndicator={false}
                    >
                        {
                            this.state.loading?<Loading/>:
                            <View>
                                <RecommendTea
                                    TeacherList={this.state.dataList}
                                    noGo={true}>
                                </RecommendTea>
                                <View style={styles.TeacherInfoContent}>
                                    <TeacherInfo dataList={this.state.dataList}></TeacherInfo>
                                </View>
                                <View style={styles.otherCourse}>
                                    <Text style={styles.otherCourseTitle}>
                                        {this.props.otherCourse?'该老师的其他在授课程':'该老师的所有在授课程'}
                                    </Text>
                                    <View style={styles.otherCourseContent}>
                                    {this.state.LessonsList.length?
                                        <Lessons
                                            LessonsList={this.state.LessonsList}
                                            subject={this.state.subject}
                                            grade={this.state.grade}
                                           {...this.props}>
                                        </Lessons>:
                                        this.state.noData ? <Text style={styles.emptyText}>暂无数据</Text> : <Text></Text>
                                        }
                                    </View>
                                </View>  
                                <View style={{ height: setHW(120)}}>
                                    {
                                        !this.state.noData && <View style={styles.loadMore}>
                                            {this.state.isLoading ? <Text style={styles.loadMoreText}>加载中...</Text> : <Text style={styles.loadMoreText} onPress={() => { this.getMoreLessons() }}>点击加载更多</Text>}
                                        </View>
                                    }
                                    {
                                        this.state.noData && this.state.LessonsList.length == cacheData.total && cacheData.total > 0 && <View style={styles.loadMore}><Text style={styles.loadMoreText}>无更多数据了</Text></View>
                                    }
                                </View>            
                            </View>
                        }
                    </ScrollView>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    TeacherInfoContent:{
        borderTopColor: '#EBEBEB',
        borderTopWidth: 0.5,
        paddingLeft: setHW(10),
        paddingRight: setHW(10),
    },
    emptyText:{
        textAlign:'center',
        fontSize:setSpText(28),
        color:'#999',
        marginTop: setHW(160),
        lineHeight: setHW(60),
        marginBottom: setHW(80)
    },
    introBox: {
        backgroundColor: '#F7F7F9',
    },
    otherCourse: {
        marginTop: setHW(20),
        paddingTop: setHW(24),
        backgroundColor: '#fff',
        paddingLeft:setHW(30),
        paddingRight:setHW(30),
    },
    otherCourseTitle: {
        color: '#333',
        fontSize:setSpText(28),
        marginBottom: setHW(5),
    },
    // loadMore
    loadMore: {
        flexDirection: 'row',
        justifyContent: 'center',
        height: setHW(100),
        alignItems: 'center',
    },
    loadMoreText: {
        color: '#ddd',
    },
    noDataWrapper: {
        height: setHW(80),
        justifyContent: 'center',
        alignItems: 'center'
    },
    noData: {
        color: '#ddd'
    }
});